<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('横向课题列表')" />
    <style>
        .track-list {
            margin: 20px;
            padding-left: 5px;
            position: relative;
        }

        .track-list ul {
            padding-left: 0;
            list-style: none;
            max-height: 50%;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background-color: #f9f9f9;
            padding: 10px;
        }

        .track-list li {
            position: relative;
            padding: 5px 0 10px 25px;
            line-height: 1.4;
            border-left: 2px solid #d9d9d9;
            color: #666;
            transition: all 0.4s ease;
        }

        .modal-right {
            position: fixed;
            right: 0;
            margin: 0;
            height: 100%;
            display: flex;
            align-items: stretch;
        }

        .modal-right .modal-content {
            height: 100%;
            width: 70%;
            margin-left: auto;
        }
        .modal-right .but{
            position: absolute;
            right: 2%;
            bottom: 1.3%;
            background: red;
            color: white;
            border: none;
            border-radius: 4px;
        }

        .progress_inner {
            height: 80px;
            width: 100%;
            position: relative;
        }

        .progress_inner__step {
            width: 33.33%;
            font-size: 12px;
            padding: 0 5px;
            transition: all 0.4s;
            float: left;
            text-align: center;
            position: relative;
        }

        .progress_inner__step label {
            padding-top: 30px;
            display: block;
            position: relative;
            cursor: pointer;
        }

        .progress_inner__step:before {
            content: "1";
            width: 24px;
            height: 24px;
            color: #2196F3;
            background: white;
            line-height: 22px;
            border: 2px solid #2196F3;
            font-size: 12px;
            top: 0;
            border-radius: 50%;
            transition: all 0.4s;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            font-weight: bold;
            z-index: 11;
        }

        .progress_inner__step:nth-of-type(2):before {
            content: "2";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step:nth-of-type(3):before {
            content: "3";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step.completed:before {
            content: "✓";
            color: #4CAF50;
            border-color: #4CAF50;
            line-height: 22px;
            font-size: 14px;
        }

        .progress_inner__step.active:before {
            color: #2196F3;
            border-color: #2196F3;
            background: white;
        }

        .progress_inner__step.pending:before {
            color: #9E9E9E;
            border-color: #9E9E9E;
            background: white;
        }

        .progress_inner__bar {
            height: 3px;
            left: 16.665%;
            right: 16.665%;
            background: #E0E0E0;
            position: absolute;
            top: 12px;
            z-index: -1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress_inner__bar--progress {
            height: 100%;
            background: #4CAF50;
            width: 0;
            transition: width 0.6s ease;
        }

        .status-text {
            color: #9E9E9E;
            font-weight: normal;
            transition: all 0.4s;
            font-size: 12px;
        }

        .status-text.active {
            color: #2196F3;
            font-weight: bold;
        }

        .status-text.completed {
            color: #4CAF50;
            font-weight: bold;
        }

        .buttons {
            margin-top: 20px;
            text-align: center;
        }

        button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 3px;
            margin: 0 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 12px;
        }

        button:hover {
            background: #1976D2;
        }

        button:last-child {
            background: #9E9E9E;
        }

        button:last-child:hover {
            background: #757575;
        }

        /* 新增的流程记录样式 */
        .timeline-title {
            font-weight: bold;
            font-size: 14px;
            color: #333;
            text-align: left;
            margin: 0 0 25px 20px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            padding-bottom: 15px;
        }

        .timeline-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.5px;
            /*background: linear-gradient(to right, #e0e0e0, #a0a0a0, #e0e0e0);*/
            background: linear-gradient(to right,
            rgba(224,224,224,0.8),
            rgba(224,224,224,0.8),
            rgba(224,224,224,0.8)); /* 添加透明度使线条更柔和 */
            box-shadow: 0 0.5px 1px rgba(0,0,0,0.07);
        }

        .track-rcol {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            /*width: 450px;*/
            /*!*border: 1px solid #eee;*!*/
            /*margin: 20px auto;*/
            /*background: transparent;*/
        }
        .track-list {
            margin: 20px;
            padding-left: 5px;
            position: relative;
        }
        .track-list ul {
            padding-left: 0;
        }
        .track-list li {
            position: relative;
            padding: 5px 0 10px 25px;
            line-height: 1.4;
            border-left: 2px solid #d9d9d9;
            color: #666;
            list-style: none;
            /*text-align: left;*/
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li.first {
            color: #666;
            padding-top: 0;
            /*border-left-color: #fff;*/
        }
        .track-list li .node-icon {
            position: absolute;
            left: -7px;
            top: 18px;
            width: 8px; /* 调圆点*/
            height: 8px;
            background: #C0C0C0;
            border-radius: 50%;
            transition: all 0.4s ease; /* 添加过渡效果 */
            border: 2px solid #E0E0E0;
            box-sizing: content-box;
        }
        .track-list li.first .node-icon {
            background: #C0C0C0; /* 天蓝色 */
            width: 8px;
            height: 8px;
            left: -8px;
        }
        .track-list li .time {
            display: block;
            margin-bottom: 3px;
            font-size: 11px;
            color: #888;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li .txt {
            display: block;
            font-size: 12px;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }

        /* 悬停效果 */
        .track-list li:hover {
            color: #333;
        }
        .track-list li:hover .node-icon {
            transform: scale(1.3);
            background: #ed8088;
        }
        .track-list li:hover .time {
            color: #666;
        }

        /* 新增审核状态样式 */
        .approve-status {
            margin-top: 10px;
            text-align: center;
        }
        .approve-status label {
            margin: 0 10px;
            cursor: pointer;
        }
        .approve-status input {
            margin-right: 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab-0" onclick="$.table.refresh('bootstrap-table0')" aria-expanded="true">已完结</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-1" onclick="$.table.refresh('bootstrap-table1')" aria-expanded="false"> 立项申请</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-2" onclick="$.table.refresh('bootstrap-table2')" aria-expanded="false">结项申请</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-3" onclick="$.table.refresh('bootstrap-table3')" aria-expanded="false">追加金额</a>
                </li>

            </ul>
            <div class="tab-content">
                <div id="tab-0" class="tab-pane active">
                    <div class="panel-body">
                        <div class="container-div">
                            <div class="row">
                                <div class="col-sm-12 search-collapse " shiro:hasPermission="system:apply:select">
                                    <form id="formId0">
                                        <div class="select-list">
                                            <ul>
                                                <li>
                                                    <label>申请人：</label>
                                                    <input type="text" name="userName"/>
                                                </li>
                                                <li>
                                                    <label>课题：</label>
                                                    <input type="text" name="topName"/>
                                                </li>
                                                <li>
                                                    <label>教研室：</label>
                                                    <input type="text" name="dname"/>
                                                </li>
<!--                                                <li>-->
<!--                                                    <label>状态：</label>-->
<!--                                                    <select name="state" th:with="type=${@dict.getType('sci_crosswise_tasks')}">-->
<!--                                                        <option value="">所有</option>-->
<!--                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
<!--                                                    </select>-->
<!--                                                </li>-->
                                                <li>
                                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId0','bootstrap-table0')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId0')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </form>
                                </div>

                                <div id="toolbar0" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                                    <div class="btn-group-sm"  role="group" style="display: inline-flex; gap: 4px;">
                                        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:apply:export">
                                            <i class="fa fa-download"></i> 导出
                                        </a>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 15px; padding: 6px 36px; border-radius: 4px;">
                                        <th:block th:replace="include :: status-circles"/>
                                    </div>
                                </div>
                                <div class="col-sm-12 select-table table-striped">
                                    <table id="bootstrap-table0"></table>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div id="tab-1" class="tab-pane ">
                    <div class="panel-body">
                        <div class="container-div">
                            <div class="row">
                                <div class="col-sm-12 search-collapse" shiro:hasPermission="system:apply:select">
                                    <form id="formId1">
                                        <div class="select-list">
                                            <ul>
                                                <li>
                                                    <label>申请人：</label>
                                                    <input type="text" name="userName"/>
                                                </li>
                                                <li>
                                                    <label>课题：</label>
                                                    <input type="text" name="topName"/>
                                                </li>
                                                <li>
                                                    <label>教研室：</label>
                                                    <input type="text" name="dname"/>
                                                </li>
                                                <li>
                                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId1','bootstrap-table1')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId1')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </form>
                                </div>

                                <div id="toolbar1" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                                    <div class="btn-group-sm"  role="group" style="display: inline-flex; gap: 4px;">
                                        <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:apply:add">
                                            <i class="fa fa-plus"></i> 添加
                                        </a>
                                        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:apply:export">
                                            <i class="fa fa-download"></i> 导出
                                        </a>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 15px; padding: 6px 36px; border-radius: 4px;">
                                        <th:block th:replace="include :: status-circles"/>
                                    </div>
                                </div>
                                <div class="col-sm-12 select-table table-striped">
                                    <table id="bootstrap-table1"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <div class="container-div">
                            <div class="row">
                                <div class="col-sm-12 search-collapse" shiro:hasPermission="system:apply:select">
                                    <form id="formId2">
                                        <div class="select-list">
                                            <ul>
                                                <li>
                                                    <label>申请人：</label>
                                                    <input type="text" name="userName"/>
                                                </li>
                                                <li>
                                                    <label>课题：</label>
                                                    <input type="text" name="topName"/>
                                                </li>
                                                <li>
                                                    <label>教研室：</label>
                                                    <input type="text" name="dname"/>
                                                </li>
                                                <li>
                                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId2','bootstrap-table2')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId2')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </form>
                                </div>

                                <div id="toolbar2" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                                    <div class="btn-group-sm"  role="group" style="display: inline-flex; gap: 4px;">
                                        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:apply:export">
                                            <i class="fa fa-download"></i> 导出
                                        </a>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 15px; padding: 6px 36px; border-radius: 4px;">
                                        <th:block th:replace="include :: status-circles"/>
                                    </div>
                                </div>
                                <div class="col-sm-12 select-table table-striped">
                                    <table id="bootstrap-table2"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane">
                    <div class="panel-body">
                        <div class="container-div">
                            <div class="row">
                                <div class="col-sm-12 search-collapse" shiro:hasPermission="system:apply:select">
                                    <form id="formId3">
                                        <div class="select-list">
                                            <ul>
                                                <li>
                                                    <label>申请人：</label>
                                                    <input type="text" name="userName"/>
                                                </li>
                                                <li>
                                                    <label>课题：</label>
                                                    <input type="text" name="topName"/>
                                                </li>
                                                <li>
                                                    <label>教研室：</label>
                                                    <input type="text" name="dname"/>
                                                </li>
                                                <li>
                                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId3','bootstrap-table3')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId3')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </form>
                                </div>

                                <div id="toolbar3" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                                    <div class="btn-group-sm"  role="group" style="display: inline-flex; gap: 4px;">
                                        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:apply:export">
                                            <i class="fa fa-download"></i> 导出
                                        </a>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 15px; padding: 6px 36px; border-radius: 4px;">
                                        <th:block th:replace="include :: status-circles"/>
                                    </div>
                                </div>
                                <div class="col-sm-12 select-table table-striped">
                                    <table id="bootstrap-table3"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





</div>

<div class="wrapper wrapper-content fadeInRight" style="position: absolute; left: -9999px;">
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="modal inmodal" id="lcjl_Moda" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-right" >
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <div class="timeline-title">流程记录</div>

                                    <!-- 原有的流程进度条部分 -->
                                    <div>
                                        <div class='progress_inner'>
                                            <div class='progress_inner__step active' id='step-1'>
                                                <label for='step-1'><span class="status-text active">待提交</span></label>
                                            </div>
                                            <div class='progress_inner__step pending' id='step-2'>
                                                <label for='step-2'><span class="status-text">审核中</span></label>
                                            </div>
                                            <div class='progress_inner__step pending' id='step-3'>
                                                <label for='step-3'><span class="status-text">已完成</span></label>
                                            </div>
                                            <div class='progress_inner__bar' style="z-index: 10">
                                                <div class='progress_inner__bar--progress' id='progress-bar'></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-body">
                                    <!-- 流程记录标题 - 放在左上角 -->


                                    <!-- 流程记录内容 - 放在流程图下方 -->
                                    <div class="track-rcol">
                                        <div class="track-list">
                                            <ul id="event-list">
                                                <li class="first">
                                                    <i class="node-icon"></i>
                                                    <span class="time" id="current-time">等待操作...</span>
                                                    <span class="txt">[新增] - 哈尔滨信息工程学院</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
<!--    教研室-->
    var proFlag = [[${@permission.hasPermi('system:apply:process')}]];
    var editFlag = [[${@permission.hasPermi('system:apply:edit')}]];
    var DeptFlag = [[${@permission.hasPermi('system:apply:Dept')}]];
    var removeFlag = [[${@permission.hasPermi('system:apply:remove')}]];
    var editInfo = [[${@permission.hasPermi('system:apply:info')}]];
    var hechaFlag = [[${@permission.hasPermi('system:apply:hecha')}]];
    var createFlag = [[${@permission.hasPermi('system:apply:add')}]];
    var downloadFlag = [[${@permission.hasPermi('system:apply:download')}]];

    var topTypeDatas = [[${@dict.getType('sci_top_type')}]];
    var datas = [[${@dict.getType('sci_crosswise_tasks')}]];

    var prefix = ctx + "system/apply";

    // 动态生成URL
    function getUrl(tableId) {
        var year = localStorage.getItem("year");
        return prefix+"/list/"+tableId+"?year="+year;
    }



    $(function() {

        function initTable(options) {
            // 获取当前表格的ID
            var tableId = options.id;
            // 根据表格ID生成URL
            options.url = getUrl(tableId);
            // 使用生成的选项初始化表格
            $.table.init(options);
        }
        // tab-0
        var options0 = {
            id: "bootstrap-table0",
            toolbar:"toolbar0",
            url:getUrl($('table').attr('id')),
            createUrl: prefix + "/add",
            detailUrl: prefix + "/overView/{id}",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            recallUrl: prefix + "/recall/{id}",
            modalName: "横向课题",
            rowStyle: rowStyle0,
            columns: [{
                field: 'number',
                title: '序号',
                width:5 ,
                align:'center',
                switchable:false,
                formatter:function(value,row,index){
                    //return index+1; //序号正序排序从1开始

                    //通过表的#id 可以得到每页多少条
                    var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                    //通过表的#id 可以得到当前第几页
                    var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    // return pageSize * (pageNumber - 1) + index + 1;
                    return $.table.serialNumber(index);
                }
            },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'yname',
                    align: 'center',
                    title: '学院'
                },
                {
                    field: 'dname',
                    align: 'center',
                    title: '专业'
                },
                {
                    field: 'userName',
                    align: 'center',
                    title: '申请人'
                },
                {
                    field: 'topName',
                    align: 'center',
                    title: '课题名称'
                },
                {
                    field: 'signingData',
                    align: 'center',
                    title: '签订日期'
                },
                {
                    field: 'amount',
                    align: 'center',
                    title: '项目金额'
                },
                {
                    align: 'center',
                    title: '负责人排名',
                    formatter: function(value, row, index) {
                        var ranking = [];
                        if(row.firstPersonId == row.uid){
                            ranking.push("1");
                        }else
                        if(row.secondPersonId == row.uid){
                            ranking.push("2");
                        }else
                        if(row.thirdPersonId == row.uid){
                            ranking.push("3");
                        }else
                        if(row.fourthPersonId == row.uid){
                            ranking.push("4");
                        }else{
                            ranking.push("无");
                        }
                        return ranking.join('');
                    }
                },
                // {
                //     field: 'state',
                //     title: '申请状态',
                //     align: 'center',
                //     formatter: function(value, row, index) {
                //         return $.table.selectDictLabel(datas, value);
                //     }
                // },
                {
                    field: 'score',
                    align: 'center',
                    title: '已获积分'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.state ==  6){
                            actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')">撤回</a> ');
                            if (hechaFlag !== 'hidden')
                                actions.push('<br>')
                            // actions.push('<a  class="btn btn-success btn-xs ' + downloadFlag + '" href="javascript:void(0)" onclick="downloadFiles(\'' +row.id+'\')"><i class="fa fa-edit"></i>下载文件</a> ');
                            actions.push('<a class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }
                        return actions.join('');
                    }
                }]
        };

        initTable(options0);

        // tab-1
        var options1 = {
            id: "bootstrap-table1",
            toolbar:"toolbar1",
            url:getUrl($('table').attr('id')),
            createUrl: prefix + "/add",
            overUrl: prefix + "/overadd?id={id}",
            detailUrl: prefix + "/detail/{id}",
            updateUrl: prefix + "/edit/{id}",
            reamountUrl: prefix + "/Reamount/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            recallUrl: prefix + "/recall/{id}",
            pushUrl: prefix + "/push/{id}",
            modalName: "横向课题",
            rowStyle: rowStyle0,
            columns: [{
                field: 'number',
                title: '序号',
                width:5 ,
                align:'center',
                switchable:false,
                formatter:function(value,row,index){
                    //return index+1; //序号正序排序从1开始

                    //通过表的#id 可以得到每页多少条
                    var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                    //通过表的#id 可以得到当前第几页
                    var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    // return pageSize * (pageNumber - 1) + index + 1;
                    return $.table.serialNumber(index);
                }
            },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'yname',
                    align: 'center',
                    title: '学院'
                },
                {
                    field: 'dname',
                    align: 'center',
                    title: '专业'
                },
                {
                    field: 'userName',
                    align: 'center',
                    title: '申请人'
                },
                {
                    field: 'topName',
                    align: 'center',
                    title: '课题名称'
                },
                // {
                //     field: 'topType',
                //     title: '课题类型',
                //     formatter: function(value, row, index) {
                //        return $.table.selectDictLabel(topTypeDatas, value);
                //     }
                // },

                {
                    field: 'signingData',
                    align: 'center',
                    title: '签订日期'
                },
                {
                    field: 'amount',
                    align: 'center',
                    title: '项目金额'
                },
                {
                    align: 'center',
                    title: '负责人排名',
                    formatter: function(value, row, index) {
                        var ranking = [];
                        if(row.firstPersonId == row.uid){
                            ranking.push("1");
                        }else
                        if(row.secondPersonId == row.uid){
                            ranking.push("2");
                        }else
                        if(row.thirdPersonId == row.uid){
                            ranking.push("3");
                        }else
                        if(row.fourthPersonId == row.uid){
                            ranking.push("4");
                        }else{
                            ranking.push("无");
                        }
                        return ranking.join('');
                    }
                },
                // {
                //     field: 'state',
                //     title: '申请状态',
                //     align: 'center',
                //     formatter: function(value, row, index) {
                //         return $.table.selectDictLabel(datas, value);
                //     }
                // }  ,
                {
                    field: 'score',
                    align: 'center',
                    title: '已获积分'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.state == 99 ){
                            if (row.userId == row.uid){
                                actions.push('<a class="' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.push(\'' + row.id + '\')">提交&nbsp;&nbsp;&nbsp;&nbsp;</a>');
                                actions.push('<a class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                actions.push('<a class="' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')" style="color : #c90000">删除</a>');
                                actions.push('<br>')
                            }
                            actions.push('<a class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state == 1 ) {
                            if (row.userId == row.uid) {
                                actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.reamountTab(\'' + row.id + '\')">追加金额&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            }
                            if (row.dnameId == row.userdnameId || row.uid == 1) {
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/pro' + '\')">批阅</a> ');
                                actions.push('<br>')
                            }
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if((row.state == 3 || row.state == 5 ||row.state == 22)  ){
                            if (row.userId == row.uid){
                                actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                actions.push('<br>')
                            }
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state ==  2){
                            let hasButton = false;
                            if (row.userId == row.uid){
                                actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.reamountTab(\'' + row.id + '\')">追加金额&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                hasButton = true;
                            }
                            if (row.ynameId == row.userynameId || row.uid == 1) {
                                actions.push('<a  class="' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/Dept' + '\')">学院核查&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                hasButton = true;
                            }
                            if (row.dnameId == row.userdnameId || row.uid == 1) {
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回</a> ');
                                hasButton = true;
                            }
                            if (hasButton) {
                                actions.push('<br>');
                            }
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state ==  4){
                            if(row.userId == row.uid){
                                actions.push('<a  class="' + createFlag + '" href="javascript:void(0)" onclick="$.operate.overTab(\'' + row.id +'\')">申请结项&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            }
                            if(hechaFlag !== "hidden"){
                                actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                actions.push('<br>')
                                }
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state ==  11){
                            if (row.userId == row.uid){
                                actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.reamountTab(\'' + row.id + '\')"> 追加金额&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            }
                            actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/hecha'+ '\')">核查&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if(row.ynameId == row.userynameId || row.uid == 1)
                                actions.push('<a  class="' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if(hechaFlag !== "hidden" || DeptFlag !== "hidden" || (editFlag !== "hidden" && row.uid==row.userId))
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }

                        return actions.join('');
                    }
                }]
        };
        initTable(options1);

    //    tab-2
        var options2 = {
            id: "bootstrap-table2",
            toolbar:"toolbar2",
            url:getUrl($('table').attr('id')),
            createUrl: prefix + "/overadd?id={id}",
            detailUrl: prefix + "/overdetail/{id}",
            updateUrl: prefix + "/overedit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            recallUrl: prefix + "/recall/{id}",
            modalName: "横向课题结项",
            rowStyle: rowStyle0,
            columns: [{
                field: 'number',
                title: '序号',
                width:5 ,
                align:'center',
                switchable:false,
                formatter:function(value,row,index){
                    //return index+1; //序号正序排序从1开始

                    //通过表的#id 可以得到每页多少条
                    var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                    //通过表的#id 可以得到当前第几页
                    var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    // return pageSize * (pageNumber - 1) + index + 1;
                    return $.table.serialNumber(index);
                }
            },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'yname',
                    align: 'center',
                    title: '学院'
                },
                {
                    field: 'dname',
                    align: 'center',
                    title: '专业'
                },
                {
                    field: 'userName',
                    align: 'center',
                    title: '申请人'
                },
                {
                    field: 'topName',
                    align: 'center',
                    title: '课题名称'
                },
                // {
                //     field: 'topType',
                //     title: '课题类型',
                //     formatter: function(value, row, index) {
                //        return $.table.selectDictLabel(topTypeDatas, value);
                //     }
                // },

                {
                    field: 'signingData',
                    align: 'center',
                    title: '签订日期'
                },
                {
                    field: 'amount',
                    align: 'center',
                    title: '项目金额'
                },
                {
                    align: 'center',
                    title: '负责人排名',
                    formatter: function(value, row, index) {
                        var ranking = [];
                        if(row.firstPersonId == row.uid){
                            ranking.push("1");
                        }else
                        if(row.secondPersonId == row.uid){
                            ranking.push("2");
                        }else
                        if(row.thirdPersonId == row.uid){
                            ranking.push("3");
                        }else
                        if(row.fourthPersonId == row.uid){
                            ranking.push("4");
                        }else{
                            ranking.push("无");
                        }
                        return ranking.join('');
                    }
                },
                // {
                //     field: 'state',
                //     title: '申请状态',
                //     align: 'center',
                //     formatter: function(value, row, index) {
                //         return $.table.selectDictLabel(datas, value);
                //     }
                // },
                {
                    field: 'score',
                    align: 'center',
                    title: '已获积分'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.state == 7 ){
                            // if(row.userId == row.uid){
                            //     actions.push('<a class="' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"> <i class="fa fa-remove"></i>删除</a>');
                            //     actions.push('<a   class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"> <i class="fa fa-edit"></i>更新</a> ');
                            // }
                            if(row.dnameId == row.userdnameId || row.uid == 1)
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.overdetailTab(\'' + row.id+'/JYSOVER' + '\')">批阅结项&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if (proFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');

                        }else
                        if((row.state == 9 || row.state == 10 || row.state == 44)  ){
                            if (row.userId == row.uid){
                                actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            }
                            // if (row.dnameId == row.userdnameId)
                            //     actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            // actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            // if(row.ynameId == row.userynameId)
                            //     actions.push('<a  class="' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if(editFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');

                        }else if(row.state ==  8){
                            if(row.ynameId == row.userynameId || row.uid == 1)
                                actions.push('<a  class="' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.overdetailTab(\'' + row.id +'/DeptOVER'+ '\')">学院批阅结项&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if (row.dnameId == row.userdnameId || row.uid == 1)
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if(proFlag !== "hidden" || DeptFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                            }else
                        if(row.state == 33){
                            actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.overdetailTab(\'' + row.id +'/KYCOVER'+ '\')">批阅结项&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  class="' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            if (DeptFlag !== "hidden" || hechaFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }
                        return actions.join('');
                    }
                }]
        };
        initTable(options2);

        // tab-3
        var options3 = {
            id: "bootstrap-table3",
            toolbar:"toolbar3",
            url:getUrl($('table').attr('id')),
            createUrl: prefix + "/add",
            detailUrl: prefix + "/reamountdetail/{id}",
            updateUrl: prefix + "/reamountedit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            recallUrl: prefix + "/recall/{id}",
            modalName: "追加金额",
            rowStyle: rowStyle0,
            columns: [{
                field: 'number',
                title: '序号',
                width:5 ,
                align:'center',
                switchable:false,
                formatter:function(value,row,index){
                    //return index+1; //序号正序排序从1开始
                    //通过表的#id 可以得到每页多少条
                    var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                    //通过表的#id 可以得到当前第几页
                    var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    // return pageSize * (pageNumber - 1) + index + 1;
                    return $.table.serialNumber(index);
                }
            },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'yname',
                    align: 'center',
                    title: '学院'
                },
                {
                    field: 'dname',
                    align: 'center',
                    title: '专业'
                },
                {
                    field: 'userName',
                    align: 'center',
                    title: '申请人'
                },
                {
                    field: 'topName',
                    align: 'center',
                    title: '课题名称'
                },
                {
                    field: 'topNumber',
                    align: 'center',
                    title: '课题编号'
                },
                {
                    field: 'reAmount',
                    align: 'center',
                    title: '追加金额'
                },
                {
                    align: 'center',
                    title: '负责人排名',
                    formatter: function(value, row, index) {
                        var ranking = [];
                        if(row.firstPersonId == row.uid){
                            ranking.push("1");
                        }else
                        if(row.secondPersonId == row.uid){
                            ranking.push("2");
                        }else
                        if(row.thirdPersonId == row.uid){
                            ranking.push("3");
                        }else
                        if(row.fourthPersonId == row.uid){
                            ranking.push("4");
                        }else{
                            ranking.push("无");
                        }
                        return ranking.join('');
                    }
                },
                // {
                //     field: 'score',
                //     align: 'center',
                //     title: '已获积分'
                // },
                // {
                //     field: 'state',
                //     title: '申请状态',
                //     align: 'center',
                //     formatter: function(value, row, index) {
                //         return $.table.selectDictLabel(datas, value);
                //     }
                // },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.state == 99 ){
                            if (row.userId == row.uid){
                                actions.push('<a class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                actions.push('<a class="' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')" style="color : #c90000">删除</a>');
                                actions.push('<br>')
                            }
                            actions.push('<a class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory1(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state == 1 ){
                            // if(row.userId == row.uid){
                            //     actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                            //     actions.push('<a   class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.reid + '\')"><i class="fa fa-edit"></i>更新</a> ');
                            // }
                            if(row.dnameId == row.userdnameId || row.uid == 1)
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid+'/pro' + '\')">教研室批阅</a> ');
                            if(proFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory1(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if((row.state == 3 || row.state == 5 ||row.state == 22)  ){
                            if (row.userId == row.uid){
                                actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.reid + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            }
                            if(editFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory1(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state ==  2){
                            // actions.push('<a  class="btn btn-danger btn-xs ' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')"><i class="fa fa-edit"></i>撤回</a> ');
                            if(row.ynameId == row.userynameId || row.uid == 1)
                                actions.push('<a  class="' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/Dept'+ '\')">学院核查</a> ');
                            if(DeptFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory1(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state ==  6){
                            // actions.push('<a  class="btn btn-danger btn-xs ' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')"><i class="fa fa-edit"></i>撤回</a> ');
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory1(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }else
                        if(row.state ==  11){
                            // actions.push('<a  class="btn btn-danger btn-xs ' + DeptFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')"><i class="fa fa-edit"></i>撤回</a> ');
                            actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/hecha'+ '\')">核查</a> ');
                            if(hechaFlag !== "hidden")
                                actions.push('<br>')
                            actions.push('<a  class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.reid +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory1(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');
                        }
                        return actions.join('');
                    }
                }]
        };
        initTable(options3);

        window.addEventListener("storage",function (event){
            if (event.key==="year"){
                // 销毁表格，再初始化
                $('#bootstrap-table0').bootstrapTable('destroy');
                initTable(options0)
                $('#bootstrap-table1').bootstrapTable('destroy');
                initTable(options1)
                $('#bootstrap-table2').bootstrapTable('destroy');
                initTable(options2)
                $('#bootstrap-table3').bootstrapTable('destroy');
                initTable(options3)
            }

        })

    });


</script>
<script>
    function downloadFiles(id) {
        window.location.href = ctx + 'common/HXdownloadZip?id='+id;
    }

    function rowStyle0(row, index) {
        // 定义状态值与颜色的映射关系
        const stateColorMap = {
            6: '#67c23a', 4: '#67c23a', // 完结 绿色
            3: '#e6a344',  5: '#e6a344', 9: '#e6a344', 10: '#e6a344', 22: '#e6a344', 44: '#e6a344',99: '#e6a344', // 被驳回，草稿 黄色
            1: '#2c99ff', 2: '#2c99ff',  7: '#2c99ff', 8: '#2c99ff', 11: '#2c99ff', 33: '#2c99ff' // 审核中 蓝色
        };

        // 统一将 row.state 转换为字符串进行查找
        const state = String(row.state);

        // 根据状态值查找对应的颜色
        if (state in stateColorMap) {
            return {
                css: { color: stateColorMap[state] }
            };
        }

        // 默认样式（可自定义）
        return {
            css: { color: '#000000' } // 默认黑色
        };
    }

    function showhistory(id,state) {
        updateProgressStepColor(state)
        //查询配乐记录
        $.ajax({
            url: prefix + '/bhyy/'+id,
            type: 'POST',
            data: {
                kid: id
            },
            success: function (response) {
                const eventList = document.getElementById('event-list');
                eventList.innerHTML = '';
                response.rows.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
                response.rows.forEach(function (row) {
                    const li = document.createElement('li');
                    li.innerHTML = `

                        <div class="event-item">
                            <div class="event-content">
                                <i class="node-icon"></i>
                                <span class="time" id="current-time">${row.createTime}</span>
                                <span class="txt">[${row.state}] - ${row.uname}</span>
                            </div>
                        </div>
                    `;
                    eventList.appendChild(li);
                });
            },
            error: function () {
                alert('Failed to fetch event history.');
            }
        });
    }

    function showhistory1(id,state) {
        updateProgressStepColor(state)
        //查询配乐记录
        $.ajax({
            url: prefix + '/abhyy/'+id,
            type: 'POST',
            data: {
                kid: id
            },
            success: function (response) {
                const eventList = document.getElementById('event-list');
                eventList.innerHTML = '';
                response.rows.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
                response.rows.forEach(function (row) {
                    const li = document.createElement('li');
                    li.innerHTML = `

                        <div class="event-item">
                            <div class="event-content">
                                <i class="node-icon"></i>
                                <span class="time" id="current-time">${row.createTime}</span>
                                <span class="txt">[${row.state}] - ${row.uname}</span>
                            </div>
                        </div>
                    `;
                    eventList.appendChild(li);
                });
            },
            error: function () {
                alert('Failed to fetch event history.');
            }
        });
    }

    function updateProgressStepColor(state) {
        // 获取所有步骤元素
        const steps = document.querySelectorAll('.progress_inner__step');
        const progressBar = document.querySelector('.progress_inner__bar--progress');


        // 遍历所有步骤，重置样式
        steps.forEach(step => {
            step.classList.remove('active', 'completed', 'pending');
            step.querySelector('.status-text').classList.remove('active', 'completed');
        });

        // 重置进度条
        progressBar.style.width = '0';

        // 根据 state 设置相应的步骤颜色
        if (state === 99) {
            document.getElementById('step-1').classList.add('active');
            document.getElementById('step-1').querySelector('.status-text').classList.add('active');
            progressBar.style.width = '0';
        } else if (state === 6) {
            document.getElementById('step-1').classList.add('completed');
            document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
            document.getElementById('step-2').classList.add('completed');
            document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
            document.getElementById('step-3').classList.add('completed');
            document.getElementById('step-3').querySelector('.status-text').classList.add('completed');
            progressBar.style.width = '100%';
        } else if ([1, 2,  7, 8, 11, 33].includes(state)) {
            document.getElementById('step-1').classList.add('completed');
            document.getElementById('step-1').querySelector('.status-text').classList.add('completed');

            // 审核中步骤高亮为 active
            document.getElementById('step-2').classList.add('active');
            document.getElementById('step-2').querySelector('.status-text').classList.add('active');
            progressBar.style.width = '45%';
        } else {
            // 默认情况下，所有步骤为灰色
            steps.forEach(step => {
                step.classList.add('pending');
                step.querySelector('.status-text').classList.add('pending');
            });
        }
    }
</script>
</body>
</html>
